stufflog3/frontend/src/routes/[scope=prettyid]/overview.svelte

<script lang="ts" context="module">
  import type { Load } from "@sveltejs/kit/types/internal";

  function generateItemFilters(now: Date): {scheduledFilter: ItemFilter, acquiredFilter: ItemFilter, looseFilter: ItemFilter} {
    return {
      scheduledFilter: {
        scheduledDate: datesOf(parseInterval("next:7d", now)),
      },
      acquiredFilter: {
        acquiredTime: morningInterval(parseInterval("today", now)),
      },
      looseFilter: {
        loose: true,
        unAcquired: true,
        unScheduled: true,
      },
    }
  }

  export const load: Load = async({params, stuff, fetch}) => {
    const scopeId = parseInt(params.scope.split("-")[0]);

    const client = sl3(fetch, stuff.idToken);

    const {acquiredFilter, looseFilter, scheduledFilter} = generateItemFilters(new Date());
    const [scheduledItems, acquiredItems, looseItems, sprints] = await Promise.all([
      client.listItems(scopeId, scheduledFilter),
      client.listItems(scopeId, acquiredFilter),
      client.listItems(scopeId, looseFilter),
      client.listSprints(scopeId),
    ]);

    return {
      stuff: { title: "Overview" },
      props: {scheduledItems, acquiredItems, looseItems, sprints}
    };
	}
</script>

<script lang="ts">  
  import { sl3 } from "$lib/clients/sl3";
  import { getScopeContext } from "$lib/components/contexts/ScopeContext.svelte";
  import Column from "$lib/components/layout/Column.svelte";
  import Columns from "$lib/components/layout/Columns.svelte";
  import Row from "$lib/components/layout/Row.svelte";
  import Option from "$lib/components/layout/Option.svelte";
  import OptionsRow from "$lib/components/layout/OptionsRow.svelte";
  import StatSubSection from "$lib/components/scope/StatSubSection.svelte";
  import DeletionModal from "$lib/modals/DeletionModal.svelte";
  import StatCreateEditModal from "$lib/modals/StatCreateEditModal.svelte";
  import parseInterval, { datesOf, morningInterval } from "$lib/utils/timeinterval";
  import type Item from "$lib/models/item";
  import ItemCreateModal from "$lib/modals/ItemCreateModal.svelte";
  import Card from "$lib/components/common/Card.svelte";
  import CardHeader from "$lib/components/common/CardHeader.svelte";
  import SprintCreateUpdateModal from "$lib/modals/SprintCreateUpdateModal.svelte";
  import type Sprint from "$lib/models/sprint";
  import SprintListContext from "$lib/components/contexts/SprintListContext.svelte";
  import SprintList from "$lib/components/scope/SprintList.svelte";
  import ItemAcquireModal from "$lib/modals/ItemAcquireModal.svelte";
  import { getModalContext } from "$lib/components/contexts/ModalContext.svelte";
  import ProjectCreateEditModal from "$lib/modals/ProjectCreateEditModal.svelte";
  import ScopeCreateUpdateModal from "$lib/modals/ScopeCreateUpdateModal.svelte";
  import type { ItemFilter } from "$lib/models/item";
  import ItemMultiListContext from "$lib/components/contexts/ItemMultiListContext.svelte";
  import { getTimeContext } from "$lib/components/contexts/TimeContext.svelte";
  import ItemListRow from "$lib/components/scope/ItemListRow.svelte";
  import Icon from "$lib/components/layout/Icon.svelte";

  export let acquiredItems: Item[];
  export let scheduledItems: Item[];
  export let looseItems: Item[];
  export let sprints: Sprint[];

  const {scope} = getScopeContext();
  const {openModal} = getModalContext();
  const {now} = getTimeContext();

  function openCreateProject() {
    openModal({name: "project.create"});
  }

  function openPostItem() {
    openModal({name: "item.create"});
  }

  function openEditScope() {
    openModal({name: "scope.edit", scope: $scope});
  }

  function openDeleteScope() {
    openModal({name: "scope.delete", scope: $scope});
  }
</script>

<ItemMultiListContext lists={{acquiredItems, scheduledItems, looseItems}} filters={generateItemFilters($now)}>
  <SprintListContext sprints={sprints} intervalString="">
    <Columns fullwidth>
      <Column>
        <Row title="Options">
          <Card on:click={openCreateProject} pointerCursor><CardHeader>Create Project</CardHeader></Card>
          <Card on:click={openPostItem} pointerCursor><CardHeader>Create Item</CardHeader></Card>
          <Card on:click={openEditScope} pointerCursor><CardHeader>Edit Scope</CardHeader></Card>
          <Card on:click={openDeleteScope} pointerCursor><CardHeader>Delete Scope</CardHeader></Card>
        </Row>
        <ItemListRow title="Scheduled" key="scheduleItems" />
        <ItemListRow title="Today" key="acquiredItems" showAcquiredTime />
        <ItemListRow title="Loose" key="looseItems" />
      </Column>
      <Column>
        <Row title="Sprints">
          <OptionsRow slot="right">
            <Option open={{name: "sprint.create"}}><Icon name="plus" /></Option>
          </OptionsRow>
          <SprintList sub />
        </Row>
        <Row title="Stats">
          <OptionsRow slot="right">
            <Option open={{name: "stat.create"}}><Icon name="plus" /></Option>
          </OptionsRow>
          {#each $scope.stats as stat (stat.id)}
            <StatSubSection stat={stat} />
          {/each}
        </Row>
      </Column>
    </Columns>
    
    <ItemCreateModal />
    <ItemAcquireModal />
    <StatCreateEditModal />
    <DeletionModal />
    <SprintCreateUpdateModal />
    <ProjectCreateEditModal />
    <ScopeCreateUpdateModal />
  </SprintListContext>
</ItemMultiListContext>